<template>
	<div class="stocks_contents">
		<div class="stocks_header">
			<div class="stocks_header_left">
				<div class="stocks_header_left_title"> DataEra CryptoStock 仪表板 </div>
				<div class="stocks_header_left_time">
					由 MetaEra 提供，最后更新:
					<span>{{ lastUpdateTime }}</span>
				</div>
			</div>
			<div class="stocks_header_right">
				<div class="stocks_header_right_text">
					加密货币概念股实时 OCHLV 数据 。
				</div>
			</div>
		</div>

		<div
			class="content-box content-box-pc_coinstock content-box-mobile_coinstock"
		>
			<div class="stocks_table_header">
				<div class="stocks_table_header_left">
					<div class="stocks_table_header_title">CryptoStock 实时仪表板 </div>
				</div>
				<div class="stocks_table_header_right">
					<div class="stocks_table_header_search">
						<div class="stocks_table_header_search_icon">
							<img
								@click="searchCoinStock()"
								src="https://res.metaera.hk/resources/assets/images/dataera/search-svgrepo-com.png"
								alt=""
							/>
						</div>
						<div class="stocks_table_header_search_content">
							<el-input
								type="text"
								placeholder="Search"
								v-model="searchQuery"
								class="stocks_table_header_search_input"
								@input="searchCoinStock()"
							/>
						</div>
					</div>
					<div class="stocks_table_header_filter">
						<el-select
							v-model="selectedFilter"
							placeholder="筛选市场"
							class="stocks_table_header_select"
							@change="handleFilterChange"
						>
							<el-option
								v-for="item in getfilterOptions()"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</div>
					<div class="stocks_table_header_filter" v-if="false">
						<el-select
							v-model="selectedTypeFilter"
							placeholder="筛选类型"
							class="stocks_table_header_select"
							@change="handleFilterChange"
						>
							<el-option
								v-for="item in getfilterTypeOptions()"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</div>
					<div class="stocks_table_header_download" @click="downloadClick()">
						<img
							src="https://res.metaera.hk/resources/assets/images/dataera/下载.png"
							alt=""
						/>
					</div>
				</div>
			</div>

			<div
				class="table-box_coinstock margin-pc_coinstock margin-mobile0_coinstock"
			>
				<el-table
					:data="tableData"
					style="width: 100%"
					fit
					:cell-class-name="customClass"
					:row-class-name="tableRowClassName1"
					:default-sort="currentSort"
					@sort-change="handleSortChange"
				>
					<el-table-column v-if="!isMobileDevice" label="" width="10px">
						<template> </template>
					</el-table-column>
					<el-table-column
						v-for="(item, ind) in getTableColumn()"
						:prop="item.prop"
						:label="item.label"
						:key="ind"
						:sortable="item.sortable"
						:min-width="
							isMobileDevice
								? ind == 0
									? '130'
									: ind == 1
									? '90'
									: ind == 2
									? '80'
									: ind == 3 || ind == 7 || ind == 8 || ind == 6
									? '120'
									: ind == 4
									? '90'
									: ind == getTableColumn().length - 1
									? '100'
									: '100'
								: ind == 0
								? '130'
								: ind == getTableColumn().length - 1
								? '80'
								: ind == 2
								? '60'
								: ind == 4
								? '80'
								: ind == 5
								? '80'
								: ind == 3 || ind == 7 || ind == 8 || ind == 6
								? '100'
								: '80'
						"
					>
						<template slot-scope="scope">
							<span
								v-if="
									item.scopedSlots &&
									item.scopedSlots.customRender === 'amplitudeSlot'
								"
								:style="{
									color: scope.row.amplitude.isPositive ? '#f56c6c' : '#67c23a',
								}"
							>
								{{ scope.row.amplitude.value }}
							</span>
							<span v-else-if="item.prop === 'rawOpen'">
								{{ formatCurrency(scope.row.rawOpen) }}
							</span>
							<span v-else-if="item.prop === 'rawAccumulatedVolume'">
								{{ formatNumber(scope.row.rawAccumulatedVolume) }}
							</span>
							<span v-else :style="{}">
								{{ scope.row[item.prop] }}
							</span>
						</template>
					</el-table-column>

					<el-table-column label="" width="30px">
						<template> </template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<div class="stocks_introduction">
			<div class="stocks_introduction_maintitle">
				关于CryptoStocks 需要了解的事项
				<div
					class="stocks_introduction_maintitle_icon"
					v-if="showExpendContent"
					@click="expendClick()"
				>
					<img
						src="https://res.metaera.hk/resources/assets/images/dataera/三角形_上.png"
						alt=""
					/>
				</div>
				<div
					class="stocks_introduction_maintitle_icon"
					v-if="!showExpendContent"
					@click="expendClick()"
				>
					<img
						src="https://res.metaera.hk/resources/assets/images/dataera/三角形_下.png"
						alt=""
					/>
				</div>
			</div>
			<div v-if="showExpendContent">
				<div
					class="stocks_introduction_content"
					v-for="(item, index) in getintroductions()"
					:key="index"
				>
					<div>
						<div class="stocks_introduction_content_title">
							{{ item.title }}
						</div>
						<div class="stocks_introduction_content_text">
							{{ item.content }}
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="stocks_introduction_line"></div>
		<bottom :type="'color1'"></bottom>
	</div>
</template>

<script>
import headerNav from "./headern.vue";
import FileSaver from "file-saver";
import * as XLSX from "xlsx";

import headerTop from "@/components/pc/headern.vue";
import { stocksList } from "@/api/home";
import bottom from "../../components/pc/bottom.vue";
import Pusher from "pusher-js";
import { newBus } from "../../components/pc/headern";

export default {
	name: "",
	components: { headerNav, headerTop, bottom },
	props: ["type"],
	data() {
		return {
			isMobileDevice: window.screen.width < 900,
			isScrolled: false,
			osafai: false,
			olead: false,
			topChart: null,
			localLanguage: 0,
			searchQuery: "",
			tableData: [],
			sortType: 0,
			tableRightData: [],
			allList: [],
			lastUpdateTime: "",
			introductions: [],
			// 新增数据
			selectedFilter: "",
			filterOptions: [
				{ value: "", label: "ALL Market" },
				{ value: "Nasdaq", label: "Nasdaq" },
				{ value: "NYSE", label: "NYSE" },
				{ value: "TSX", label: "TSX" },
				{ value: "SEHK", label: "SEHK" },
			],
			// 新增数据
			selectedTypeFilter: "",
			filterTypeOptions: [
				{ value: "", label: "ALL Type" },
				{ value: "1", label: "战略储备" },
				{ value: "2", label: "Web3 应用" },
				{ value: "3", label: "Web3 基础设施" },
			],
			stockDataTimer: null, // 用于存储定时器
			// ...其他数据
			pusher: null, // Pusher 实例
			channel: null, // 订阅的频道
			showExpendContent: false,
			currentSort: {
				prop: "rawOpen", // 默认排序字段
				order: "descending", // 默认排序方向
			},
		};
	},
	created() {},

	mounted() {
		this.showSel = 0;
		var type = this.$route.params.type;
		let localLanguage = sessionStorage.getItem("localLanguage");
		if (localLanguage == "繁体中文") {
			this.localLanguage = 1;
		} else if (localLanguage == "english") {
			this.localLanguage = 2;
		} else {
			this.localLanguage = 0;
		}
		newBus.$on("global-notification", (data) => {
			let localLanguage = sessionStorage.getItem("localLanguage");
			if (localLanguage == "繁体中文") {
				this.localLanguage = 1;
			} else if (localLanguage == "english") {
				this.localLanguage = 2;
			} else {
				this.localLanguage = 0;
			}

			console.log("localLanguage" + localLanguage);
		});

		const that = this;
		window.onresize = () => {
			return (() => {
				that.isMobileDevice = window.screen.width < 900;
			})();
		};
		this.getStocksListData();
		if (this.pusher) {
			this.pusher.disconnect(); // 断开 Pusher 连接
		}
		this.pusher = new Pusher("d19d5b04bf1304d6f09e", {
			cluster: "ap1",
			encrypted: true, // 根据需要开启
		});
		if (this.pusher) {
			this.channel = this.pusher.subscribe("metaera-stocks");

			this.channel.bind("stocks_update", (data) => {
				const now = new Date();
				this.lastUpdateTime =
					now.toISOString().replace("T", " ").replace(/\..+/, "") + " UTC";
				this.allList = data;
				this.getCurrentBtcList();
			});
		}
		// 设置定时器（29秒间隔）
		this.stockDataTimer = setInterval(() => {
			this.getStocksListData();
		}, 29000);
	},
	beforeDestroy() {
		// 清除定时器防止内存泄漏
		if (this.stockDataTimer) {
			clearInterval(this.stockDataTimer);
			this.stockDataTimer = null;
		}
		// 移除 Pusher 订阅和连接
		if (this.channel) {
			this.channel.unbind("stocks_update"); // 移除事件绑定
			this.channel.unsubscribe(); // 取消订阅频道
		}

		if (this.pusher) {
			this.pusher.disconnect(); // 断开 Pusher 连接
		}
	},
	methods: {
		getintroductions() {
			return [
				{
					title:
						this.localLanguage == 2
							? "What are CryptoStocks?"
							: "什么是 CryptoStocks？",
					content:
						this.localLanguage == 2
							? "CryptoStocks refer to companies listed on major global financial markets whose stock performance is significantly tied to holding, investing in, or being associated with crypto assets. Monitoring their performance provides insights into how traditional markets interact with the crypto economy."
							: "CryptoStocks 指的是在全球主要金融市场的公众公司的股票表现的公司。这些公司持有、投资或与加密资产有显著关联。监测它们的表现可以洞察传统市场如何与加密经济互动。",
				},
				{
					title:
						this.localLanguage == 2
							? "What are the benefits of tracking CryptoStocks?"
							: "跟踪 CryptoStocks 的好处是什么？",
					content:
						this.localLanguage == 2
							? "Tracking CryptoStocks provides a strategic advantage by bridging equities and crypto. It helps investors identify institutional crypto adoption, assess market sentiment, and uncover trading opportunities tied to digital asset exposure."
							: "跟踪 CryptoStocks 提供了通过连接股票和加密的战略优势。它帮助投资者识别机构对加密的采用，评估市场情绪，并发现与数字资产相关的交易机会。",
				},
				{
					title:
						this.localLanguage == 2
							? "How can I use this CryptoStocks dashboard?"
							: "我该如何使用这个 CryptoStocks 仪表板？",
					content:
						this.localLanguage == 2
							? "The dashboard offers real-time OCHLV data to track market movements. It’s a vital tool for investors seeking to analyze volatility, perform comparative assessments, and align their equity strategies with crypto market dynamics."
							: "该仪表板提供实时 OCHLV 数据，以跟踪市场动态。它是希望分析波动性、进行比较评估并将其股票策略与加密市场动态对齐的投资者的重要工具。",
				},
			];
		},
		expendClick() {
			this.showExpendContent = !this.showExpendContent;
		},
		getfilterTypeOptions() {
			if (this.localLanguage == 2) {
				return [
					{ value: "", label: "ALL Type" },
					{ value: "1", label: "Strategic Reserve" },
					{ value: "2", label: "Web3 Application" },
					{ value: "3", label: "Web3 Infra." },
				];
			} else {
				return [
					{ value: "", label: "全部类型" },
					{ value: "1", label: "战略储备" },
					{ value: "2", label: "Web3 应用" },
					{ value: "3", label: "Web3 基础设施" },
				];
			}
		},
		getfilterOptions() {
			if (this.localLanguage == 2) {
				return [
					{ value: "", label: "ALL Market" },
					{ value: "Nasdaq", label: "Nasdaq" },
					{ value: "NYSE", label: "NYSE" },
					{ value: "TSX", label: "TSX" },
					{ value: "SEHK", label: "SEHK" },
				];
			} else {
				return [
					{ value: "", label: "所有市场" },
					{ value: "Nasdaq", label: "Nasdaq" },
					{ value: "NYSE", label: "NYSE" },
					{ value: "TSX", label: "TSX" },
					{ value: "SEHK", label: "SEHK" },
				];
			}
		},
		searchCoinStock() {
			this.getCurrentBtcList();
		},
		handleFilterChange() {
			this.getCurrentBtcList();
		},
		getTableColumn() {
			return [
				{
					prop: "companyName",
					label: this.localLanguage == 2 ? "Name" : "名称",
					sortable: false, // 明确设置为false
				},
				{
					prop: "market",
					label: this.localLanguage == 2 ? "Market" : "市场",
					sortable: false, // 明确设置为false

					// width: 74,
				},
				{
					prop: "symbol",
					label: this.localLanguage == 2 ? "Symbol" : "代码",
					sortable: false, // 明确设置为false
				},
				{
					prop: "rawOpen",
					label: this.localLanguage == 2 ? "Price" : "价格",
					sortable: "custom",
					sortMethod: (a, b) => {
						return Number(a.rawOpen) - Number(b.rawOpen);
					},
				},
				{
					prop: "amplitudeValue",
					label: this.localLanguage == 2 ? "%change" : "涨跌幅",
					scopedSlots: { customRender: "amplitudeSlot" },
					sortable: "custom",
					sortMethod: (a, b) => {
						return Number(a.amplitudeValue) - Number(b.amplitudeValue);
					},
				},
				{
					prop: "rawAccumulatedVolume",
					label: this.localLanguage == 2 ? "Volume" : "成交量",
					sortable: "custom",
					sortMethod: (a, b) => {
						return (
							Number(a.rawAccumulatedVolume) - Number(b.rawAccumulatedVolume)
						);
					},
				},
				{
					prop: "official_open_priceNumber",
					label: this.localLanguage == 2 ? "Open" : "开盘",
					sortable: false, // 明确设置为false

					// width: 90,
				},
				{
					prop: "highNumber",
					label: this.localLanguage == 2 ? "High" : "最高",
					sortable: false, // 明确设置为false

					// width: 90,
				},
				{
					prop: "lowNumber",
					label: this.localLanguage == 2 ? "Low" : "最低",
					sortable: false, // 明确设置为false

					// width: 90,
				},
				// {
				// 	prop: "hodl",
				// 	label: this.localLanguage == 2 ? "Asset HODL" : "资产 HODL",
				// 	sortable: false, // 明确设置为false
				// },
			];
		},
		customClass({ row, column, rowIndex, columnIndex }) {
			return `cell${column.property}`;
		},
		getStocksListData() {
			stocksList({})
				.then((res) => {
					if (res.code == 200) {
						const now = new Date();
						this.lastUpdateTime =
							now.toISOString().replace("T", " ").replace(/\..+/, "") + " UTC";
						const list = res.data.list;
						this.allList = list;
						this.getCurrentBtcList();
					}
				})
				.catch((error) => {
					this.$message.error(error.message);
				});
		},
		formatNumber(value) {
			if (!value) return "0";

			const num = parseFloat(value);
			if (isNaN(num)) return "0";

			if (num < 1000) {
				// 不足1K，显示全部数字（保留两位小数）
				return num;
			} else if (num >= 1000 && num < 1000000) {
				// 千单位 (K)
				return (num / 1000).toFixed(2) + "K";
			} else if (num >= 1000000 && num < 1000000000) {
				// 百万单位 (M)
				return (num / 1000000).toFixed(2) + "M";
			} else {
				// 十亿单位 (B)
				return (num / 1000000000).toFixed(2) + "B";
			}
		},

		getCurrentBtcList() {
			var list = [];
			for (let index = 0; index < this.allList.length; index++) {
				const element = this.allList[index];
				if (
					(this.searchQuery == "" ||
						element.companyName.includes(this.searchQuery)) &&
					(this.selectedFilter == "" ||
						element.market.includes(this.selectedFilter)) &&
					(this.selectedTypeFilter == "" ||
						element.type == this.selectedTypeFilter)
				) {
					list.push(element);
					element.companyName = element.companyName
						? element.companyName
						: element.symbol;
					element.highNumber = this.formatCurrency(element.today_high);
					element.lowNumber = this.formatCurrency(element.today_low);
					element.openNumber = this.formatCurrency(element.open);
					element.official_open_priceNumber = this.formatCurrency(
						element.official_open_price
					);

					const amplitudeValue =
						((element.open - element.official_open_price) /
							element.official_open_price) *
						100;

					element.amplitude = {
						value:
							element.official_open_price === 0
								? "0%"
								: amplitudeValue.toFixed(2) + "%",
						isPositive:
							element.official_open_price === 0
								? false
								: element.open - element.official_open_price >= 0,
					};

					element.amplitudeValue = amplitudeValue;

					element.accumulated_volumeNumber = this.formatNumber(
						element.accumulated_volume
					);

					if (element.type == 0) {
						element.typeName = "";
					} else if (element.type == 1) {
						element.typeName = "战略储备";
					} else if (element.type == 2) {
						element.typeName = "Web3 应用";
					} else if (element.type == 3) {
						element.typeName = "Web3 基础设施";
					}
					// 关键修改：保留原始数值用于排序
					// 确保原始数值是数字类型
					element.rawAccumulatedVolume =
						Number(element.accumulated_volume) || 0;
					element.rawOpen = Number(element.open) || 0;
					element.amplitudeValue = Number(element.amplitudeValue) || 0;
				}
			}

			console.log("sortType:" + this.sortType);

			// list.sort((a, b) => {
			// 	if (this.sortType === 0 || this.sortType === 1) {
			// 		// 按成交量排序
			// 		const aValue = a.rawAccumulatedVolume;
			// 		const bValue = b.rawAccumulatedVolume;
			// 		return this.sortType === 0 ? bValue - aValue : aValue - bValue;
			// 	} else if (this.sortType === 2 || this.sortType === 3) {
			// 		// 按涨跌幅排序
			// 		const aValue = a.amplitudeValue;
			// 		const bValue = b.amplitudeValue;
			// 		return this.sortType === 2 ? bValue - aValue : aValue - bValue;
			// 	} else if (this.sortType === 4 || this.sortType === 5) {
			// 		// 按开盘价排序
			// 		const aValue = a.rawOpen;
			// 		const bValue = b.rawOpen;
			// 		return this.sortType === 4 ? bValue - aValue : aValue - bValue;
			// 	}
			// });

			for (let index = 0; index < list.length; index++) {
				const element = list[index];
				if (this.sortType === 0 || this.sortType === 1) {
					console.log(element.accumulated_volume);
				} else if (this.sortType === 2 || this.sortType === 3) {
					console.log(element.amplitudeValue);
				} else if (this.sortType === 4 || this.sortType === 5) {
					console.log(element.open);
				}
			}
			this.tableData = [];
			this.$nextTick(() => {
				this.tableData = [...list];
			});
		},

		handleSortChange({ column, prop, order }) {
			console.log(prop + column);
			console.log("order" + order);
			this.currentSort = { prop, order };

			// if (prop === "openNumber") {
			// 	this.sortType = order === "descending" ? 4 : 5;
			// } else if (prop === "accumulated_volumeNumber") {
			// 	this.sortType = order === "descending" ? 0 : 1;
			// } else {
			// 	this.sortType = order === "descending" ? 2 : 3;
			// }

			// this.getCurrentBtcList();
			// 手动触发重新排序
			this.tableData.sort((a, b) => {
				const aValue = Number(a[prop]);
				const bValue = Number(b[prop]);
				return order === "descending" ? bValue - aValue : aValue - bValue;
			});

			// 强制更新视图
			this.tableData = [...this.tableData];
		},
		formatCurrency(value) {
			if (!value) return "$0.00 USD";

			const num = parseFloat(value);
			if (isNaN(num)) return "$0.00 USD";

			if (num < 1000) {
				// 不足1K，显示全部数字（保留两位小数）
				return `$${num.toFixed(2)} USD`;
			} else if (num >= 1000 && num < 1000000) {
				// 千单位 (K)
				return `$${(num / 1000).toFixed(2)}K USD`;
			} else if (num >= 1000000 && num < 1000000000) {
				// 百万单位 (M)
				return `$${(num / 1000000).toFixed(2)}M USD`;
			} else {
				// 十亿单位 (B)
				return `$${(num / 1000000000).toFixed(2)}B USD`;
			}
		},
		showUrl(url) {
			window.open(url, "");
		},
		// 动态设置行的类名
		tableRowClassName1({ rowIndex }) {
			if (this.isMobileDevice) {
				if (rowIndex % 2 === 0) {
					return "even-row_coinstock"; // 偶数行
				} else {
					return "odd-row_coinstock"; // 奇数行
				}
			} else {
				if (rowIndex % 2 === 0) {
					return "even-row_coinstock"; // 偶数行
				} else {
					return "odd-row_coinstock"; // 奇数行
				}
			}
		},
		downloadClick() {
			let headers = [];
			let fields = [];
			const tableData = this.getTableColumn();
			for (let index = 0; index < tableData.length; index++) {
				const element = tableData[index];
				headers.push(element.label);
				fields.push(element.prop);
			}

			// 对应接口字段
			const formatDataForExcel = (data) => {
				const rows = data.map((item) =>
					fields.map((field) => {
						return item[field];
					})
				);
				return [headers, ...rows]; // 第一行是表头
			};
			var data = this.tableData;

			// 将 JSON 数据转换为工作簿对象
			const ws = XLSX.utils.aoa_to_sheet(formatDataForExcel(data));
			const wb = XLSX.utils.book_new();
			XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

			// 生成二进制字符串
			const wbout = XLSX.write(wb, {
				bookType: "xlsx",
				bookSST: true,
				type: "array",
			});

			// 保存文件
			try {
				FileSaver.saveAs(
					new Blob([wbout], {
						type: "application/octet-stream",
					}),
					"stocks" + ".xlsx"
				);
			} catch (e) {
				if (typeof console !== "undefined") console.log(e, wbout);
			}
		},
	},
};
</script>
<style scoped>
.stocks_contents {
	margin-left: 180px;
}

@media screen and (max-width: 900px) {
	.stocks_contents {
		margin-left: 0px;
		padding-top: 60px;
	}
}

.scroll-container {
	height: 100vh;
	overflow-y: scroll;
}
.content-box-pc_coinstock {
	padding-bottom: 50px;
}

@media screen and (max-width: 900px) {
	.content-box-mobile_coinstock {
		margin-left: 0;
		margin-top: 25px;
	}

	.table-box_coinstock {
		width: 100%;
		background: #fff;
		padding-left: 0px;
		padding-right: 0px;
	}
}
</style>

<style>
/* 父容器，确保溢出隐藏并设置圆角 */
.table-box_coinstock {
	overflow: hidden; /* 确保溢出部分被隐藏 */
}

/* 设置表头的左上角和右上角圆角 */
.table-box_coinstock .el-table thead tr:first-child th:first-child {
	border-top-left-radius: 0px; /* 左上角圆角 */
}

.table-box_coinstock .el-table thead tr:first-child th:last-child {
	border-top-right-radius: 0px; /* 右上角圆角 */
}

.table-box_coinstock .el-table th.el-table__cell {
	background: #000;
}

.table-box_coinstock .el-table__header-wrapper .el-table__cell .cell {
	color: #fff !important;
	font-size: clamp(10px, calc(100vw * 12 / 1200), 16px);
	word-break: auto-phrase;
	font-weight: normal;
}
@media screen and (max-width: 900px) {
	.table-box_coinstock .el-table__header-wrapper .el-table__cell .cell {
		color: #fff !important;
		font-size: clamp(10px, calc(100vw * 14 / 496), 16px);
		word-break: auto-phrase;
	}
	.even-row_coinstock {
		background-color: rgba(105, 105, 105, 1) !important; /* 浅灰色 */
	}
	.odd-row_coinstock {
		background-color: rgba(105, 105, 105, 0.6) !important; /* 浅灰色 */
	}
	.even-row_coinstock {
		background-color: rgba(15, 15, 15, 1) !important; /* 浅灰色 */
	}
	.odd-row_coinstock {
		background-color: rgba(15, 15, 15, 0.8) !important; /* 浅灰色 */
	}
}

/* 奇数行背景色 */
.odd-row_coinstock {
	background: #050505 !important;
}

/* 偶数行背景色 */
.even-row_coinstock {
	background: #1b1b1b !important;
}
.table-box_coinstock .cellcompanyName div,
.table-box_coinstock .cellname div {
	font-weight: 600;
}
.table-box_coinstock .cellcompanyName div {
	/* text-align: left !important; */
}

.table-box_coinstock .cellhodl div {
	/* text-align: left !important; */
	margin-right: 10px;
	padding-right: 10px;
}

.table-box_coinstock .el-table__cell div {
	text-align: right;
}
.table-box_coinstock .el-table td.el-table__cell div {
	/* text-align: right; */
}
.content-box-pc_coinstock .el-table .cell {
	font-size: clamp(10px, calc(100vw * 12 / 1200), 16px);
	line-height: 1.6;
	word-break: auto-phrase;
	font-weight: normal;
}
.content-box-pc_coinstock .el-table .cell span {
	color: #fff;
	font-size: clamp(10px, calc(100vw * 12 / 1200), 16px);
	line-height: 1.6;
	font-weight: normal;
}

.table-box_coinstock .el-table__body tr:hover td .cell span {
	color: #000 !important;
	font-size: clamp(10px, calc(100vw * 12 / 1200), 16px);
	line-height: 1.6;
	font-weight: normal;
}
.content-box .cellsymbol .cell {
	color: #6e87b0 !important;
}
.content-box .cellundefined .cell {
	font-weight: bold;
}

.table-box_coinstock .el-table td.el-table__cell,
.table-box_coinstock .el-table__body {
	border-bottom: 1px solid rgba(216, 216, 216, 0.3);
}

.table-box_coinstock .el-table .el-table__cell {
	height: 60px;
}
.table-box_coinstock .el-table__body,
.table-box_coinstock .el-table td.el-table__cell,
.table-box_coinstock .el-table th.el-table__cell.is-leaf {
	border-bottom: none;
}

.table-box_coinstock .el-table__body,
.table-box_coinstock .el-table__footer,
.table-box_coinstock .el-table__header {
	width: 100% !important;
}

@media screen and (max-width: 900px) {
	.table-box_coinstock .el-table .el-table__cell {
		height: 40px;
	}
	.el-table .el-table__cell {
		height: 40px;
	}
	.content-box-mobile_coinstock .el-table .cell {
		color: #fff;
		font-size: calc(100vw * 8 / 375);
		line-height: 1;
	}
	.content-box-mobile_coinstock .el-table td.el-table__cell,
	.content-box-mobile_coinstock .el-table__body {
		border-bottom: 1px solid rgba(216, 216, 216, 0.3);
	}
	.content-box .el-table_1_column_1 .cell {
		font-weight: 600;
	}

	.content-box-pc_coinstock .el-table .cell span {
		font-size: clamp(10px, calc(100vw * 14 / 496), 16px);
	}

	.table-box_coinstock .el-table__body tr:hover td .cell span {
		font-size: clamp(10px, calc(100vw * 14 / 496), 16px);
	}
}
</style>

<!-- stocks_header -->
<style scoped>
.stocks_header {
	display: flex;
	border-radius: 5px;
	margin-left: 30px;
	margin-right: 30px;
	margin-top: 30px;
	margin-bottom: 30px;
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 14px;
	padding-bottom: 14px;
	background: linear-gradient(
		45deg,
		#9945ff,
		#8752f3,
		#5497d5,
		#04624d,
		#012113
	) !important;
}

.stocks_header_left {
	width: 50%;

	align-content: center;
}
.stocks_header_right {
	width: 50%;
	margin-left: 20px;
	margin-top: 0px;
	align-content: center;
}

.stocks_header_left_title {
	font-size: 24px;
	font-weight: bold;
	line-height: 28.8px;
	letter-spacing: normal;
	color: #ffffff;
}
.stocks_header_left_time,
.stocks_header_left_time span {
	/* EN-H5-标题分类-12 -Inter-SemiBold */
	/* 样式描述：SemiBold */

	font-size: 12px;
	font-weight: 600;
	line-height: 14px;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 10px;
}

.stocks_header_right_text {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	color: #ffffff;
}

@media screen and (max-width: 900px) {
	.stocks_header {
		display: block;

		border-radius: 5px;
		margin-left: 16px;
		margin-right: 16px;
		margin-top: 16px;
		margin-bottom: 16px;
		padding-left: 16px;
		padding-right: 16px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.stocks_header_left {
		width: 100%;
		align-content: center;
	}
	.stocks_header_right {
		width: 100%;
		margin-left: 0px;
		margin-top: 10px;
	}
	.stocks_header_left_time,
	.stocks_header_left_time span {
		margin-top: 0px;
	}
}
</style>

<!-- stocks_introduction -->
<style scoped>
.stocks_introduction {
	margin-bottom: 50px;
	margin-left: 30px;
	margin-right: 30px;
}
.stocks_introduction_maintitle {
	font-size: 32px;
	font-weight: bold;
	line-height: 36px;
	letter-spacing: normal;
	color: #ffffff;
	display: flex;
}

.stocks_introduction_maintitle_icon {
	margin-left: 20px;
	width: 24px;
	height: 24px;
}

.stocks_introduction_maintitle_icon img {
	width: 24px;
	height: 24px;
}

.stocks_introduction_content_title {
	margin-top: 25px;
	/* EN-H2-标题分类-24 -Inter-Bold */

	font-size: 24px;
	font-weight: bold;
	line-height: 26px;
	letter-spacing: normal;
	color: #ffffff;
}

.stocks_introduction_content_text {
	margin-top: 16px;
	/* EN-H4-标题分类-16 -Inter-SemiBold */
	/* 样式描述：SemiBold */

	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	color: rgba(255, 255, 255, 0.8);
}

.stocks_introduction_line {
	background: #e1e3f1;
	height: 1px;
	opacity: 0.2;
}
@media screen and (max-width: 900px) {
	.stocks_introduction {
		margin-bottom: 50px;
		margin-left: 16px;
		margin-right: 16px;
	}
	.stocks_introduction_maintitle {
		font-size: 20px;
		line-height: 24px;
	}

	.stocks_introduction_content_title {
		margin-top: 25px;
		font-size: 16px;
	}

	.stocks_introduction_content_text {
		margin-top: 16px;
		font-size: 14px;
	}
}
</style>

<style>
.stocks_contents .pc_bottom_content_logo {
	margin-left: 0px !important;
}

.stocks_contents .pc_bottom_color1 {
	margin-left: 30px;
	margin-right: 30px;
	width: auto;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
	display: none;
}
</style>

<style scoped>
.stocks_table_header {
	display: flex;
	margin-left: 30px;
	align-items: center;
	margin-bottom: 20px;
}
.stocks_table_header_left {
	display: flex;
	align-items: center;
}

.stocks_table_header_right {
	display: flex;
}
.stocks_table_header_title {
	font-weight: 700;
	font-size: 32px;
	line-height: 48px;
	letter-spacing: 0%;
	color: #fff;
}

.stocks_table_header_search {
	margin-left: 20px;
	margin-right: 20px;
	width: 196px;
	height: 32px;
	align-items: center;
	border-radius: 16px;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 14px;
	background: #9349fb4d;

	display: flex;
}

.stocks_table_header_search_icon {
	/* margin-right: 10px; */
}
.stocks_table_header_search_content {
	/* background: red; */
}

.stocks_table_header_filter {
	width: 150px;
	margin-right: 20px;
}

.stocks_table_header_download {
	width: 60px;
	height: 40px;
	border-radius: 12px;
	background: #9349fb4d;
	align-items: center;
	text-align: center;
	align-content: center;
}
.stocks_table_header_download img {
	height: 50%;
	widows: auto;
}
@media screen and (max-width: 900px) {
	.stocks_table_header {
		display: block;
		margin-left: 16px;
		align-items: center;
		margin-bottom: 20px;
	}

	.stocks_table_header_left {
		display: flex;
	}

	.stocks_table_header_right {
		margin-top: 16px;
		display: flex;
	}

	.stocks_table_header_title {
		font-weight: 700;
		font-size: 16px;
		line-height: 24px;
	}

	.stocks_table_header_search {
		margin-left: 0px;
		width: 100px;
		height: 24px;
	}
	.stocks_table_header_filter {
		width: 100px;
		margin-right: 20px;
	}
	.stocks_table_header_download {
		width: 40px;
		height: 30px;
		border-radius: 12px;
	}
}
</style>
<style>
.input-icon {
}
.el-input__prefix {
	display: flex;
	align-items: center;
}
.stocks_table_header_search_input .el-input__inner {
	height: 30px;
	border-radius: 6px;
	opacity: 1;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	letter-spacing: 0em;
	font-variation-settings: "opsz" auto;
	/* 333 */
	color: #fff;
	/* background: #f6f6f6; */
	border: 0px solid #bfbfbf;
	background-color: rgba(0, 0, 0, 0);
}

.stocks_table_header_search_input .el-input__inner::placeholder {
	font-size: 16px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.7); /* 可选：设置placeholder文字颜色 */
}
.stocks_table_header_filter .el-input__inner {
	height: 40px;
	border-radius: 12px;
	opacity: 1;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	display: flex;
	align-items: center;
	letter-spacing: 0em;
	font-variation-settings: "opsz" auto;
	/* 333 */
	color: #fff;
	/* background: #f6f6f6; */
	border: 0px solid #bfbfbf;
	background: #9349fb4d;
	text-align: center;
}
.el-textarea__inner {
	height: 100% !important;
	border-radius: 6px;
	opacity: 1;
	background: rgba(0, 0, 0, 0);
	border: 0px solid #bfbfbf;
}

.el-select-dropdown {
	border: none;
	background: #000;
	width: 160px;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
	background-color: rgba(216, 216, 216, 0.2) !important;
}
.el-select-dropdown__item {
	margin: 0 10px;
	color: #ffffff !important;
}

.el-select-dropdown__item span {
	font-size: 14px;
}
.el-popper[x-placement^="bottom"] .popper__arrow {
	border-bottom-color: transparent;
}
.el-popper .popper__arrow::after {
	border: none;
}
el-textarea {
	height: 100%;
}

.table-box_coinstock .el-table__empty-block {
	background: #000;
}

.stocks_table_cell {
	color: red !important;
}
@media screen and (max-width: 900px) {
	.stocks_table_header_search_input .el-input__inner {
		height: 30px;
		border-radius: 6px;
		font-size: 14px;
	}

	.stocks_table_header_search_input .el-input__inner::placeholder {
		font-size: 14px;
		font-weight: 700;
	}
	.stocks_table_header_filter .el-input__inner {
		height: 32px;
		border-radius: 12px;
		font-size: 12px;
		font-weight: 700;
	}
	.stocks_table_header_filter .el-input__icon {
		line-height: normal;
	}
}
</style>
